<template>
  <div class="rectangle">
    <div class="flex">
      <SvgIcon :icon-class="icon" class="svg_icon" />
      <SvgIcon :icon-class="icon + '-light'" class="svg_icon1" />
      <p class="text-white" style="margin-left: 5px">{{ title }}</p>
    </div>
    <p class="text-white" style="margin-left: 28px; font-size: 20px">
      {{ content }}
    </p>
  </div>
</template>

<script setup>
import { ref } from "vue";
defineProps({
  icon: {
    required: true,
    default: "",
  },
  title: {
    required: true,
    default: "",
  },
  content: {
    required: true,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.rectangle {
  min-width: 153px;
  width: 15%;
  height: 88px;
  border-radius: 4px;
  background: #f5f7ff;
  justify-content: space-between;
  display: inline-flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  P {
    color: #000;
    line-height: 24px;
    vertical-align: middle;
  }
  &:hover {
    cursor: pointer;
    background: #0f5ef7;
    .text-white {
      color: white; /* 高亮时白色文字 */
    }
    .svg_icon1 {
      display: block;
    }
    .svg_icon {
      display: none;
    }
  }
}

.svg_icon {
  font-size: 24px;
}
.svg_icon1 {
  display: none;
  font-size: 24px;
}
</style>
